<template>
  <div class="home tmp">
    <div class="lunbo">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="img in imgList">
          <a :href="img.url">
            <img :src="img.img" alt="">
          </a>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="nine">
      <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/news/newsList">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">新闻资讯</div></router-link></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <span class="mui-icon mui-icon-email"></span>
            <div class="mui-media-body">Email</div></a></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">Chat</div></a></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">location</div></a></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">Search</div></a></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">练习我们</div></a></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default{
    data(){
        return {
          imgList:[]
        }
    },
    created(){
        this.$http.get('http://vuecms.ittun.com/api/getlunbo').then((data)=>{
            console.log(data.body)
            if (data.body.status==0){
                this.imgList=data.body.message;
                console.log(this.imgList);
            }
        })
    }
}
</script>
<style scoped>
  .home{
    width: 100%;
  }
  .lunbo img{
    width: 100%;
    height: 100%;
  }
  .lunbo{
    width: 100%;
  }
  .lunbo .mint-swipe{
    width: 100%;
    height: 200px;
  }
  .mui-icon-home{
    width: 50px;
    height: 50px;
    background: url("../../static/images/images/menu3.png");
    background-repeat: round;
  }
  .mui-icon-email{
    width: 50px;
    height: 50px;
    background: url("../../static/images/images/menu4.png");
    background-repeat: round;
  }
  .mui-icon-chatbubble{
    width: 50px;
    height: 50px;
    background: url("../../static/images/images/menu5.png");
    background-repeat: round;
  }
  .mui-icon-location{
    width: 50px;
    height: 50px;
    background: url("../../static/images/images/menu6.png");
    background-repeat: round;
  }
  .mui-icon-search{
    width: 50px;
    height: 50px;
    background: url("../../static/images/images/menu9.png");
    background-repeat: round;
  }
  .mui-icon-phone{
    width: 50px;
    height: 50px;
    background: url("../../static/images/images/menu10.png");
    background-repeat: round;
  }
  .mui-icon-email:before,.mui-icon-home:before,.mui-icon-chatbubble:before,.mui-icon-location:before,.mui-icon-search:before,.mui-icon-phone:before{
    content: '';
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: none;
  }
  .mui-grid-view.mui-grid-9{
    background: #fff;
    border: none;
  }
</style>

